<template>
  <div>
    <a-row :gutter="18" class="oneRow">
      <a-col :xs="24" :sm="24" :md="14" :xl="14" class="aCol">
        <a-card
          hoverable
          class="aCard">
          <div style="height: 100%;padding: 15px;" slot="cover">
            <line-char style="width: 100%"></line-char>
          </div>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="24" :md="10" :xl="10"  class="aCol">
        <a-row :gutter="18" class="oneRowRightColRow" style="margin-top: 0 ">
          <a-col :xs="12" :sm="12" :md="12" :xl="12" class="aCol">
            <a-card
              hoverable
              class="aCard blueCard">
              <div class="box" slot="cover">
                <div class="title">平台注册货车</div>
                <div class="content">
                  <div class="left">
                    <a-icon type="car"/>
                  </div>
                  <div class="right">
                    <div class="span">trucks number</div>
                    10000
                  </div>
                </div>
              </div>
            </a-card>
          </a-col>
          <a-col :xs="12" :sm="12" :md="12" :xl="12" class="aCol">
            <a-card
              hoverable
              class="aCard greenCard">
              <div class="box" slot="cover">
                <div class="title">今日交易额</div>
                <div class="content">
                  <div class="left">
                    ￥
                  </div>
                  <div class="right">
                    <div class="span">money today</div>
                    ￥10000
                  </div>
                </div>
              </div>
            </a-card>
          </a-col>
        </a-row>
        <a-row :gutter="18" class="oneRowRightColRow">
          <a-col :xs="12" :sm="12" :md="12" :xl="12" class="aCol">
            <a-card
              hoverable
              class="aCard redCard">
              <div class="box" slot="cover">
                <div class="title">平台注册司机</div>
                <div class="content">
                  <div class="left">
                    <a-icon type="team"/>
                  </div>
                  <div class="right">
                    <div class="span">trucks number</div>
                    10000
                  </div>
                </div>
              </div>
            </a-card>
          </a-col>
          <a-col :xs="12" :sm="12" :md="12" :xl="12" class="aCol">
            <a-card
              hoverable
              class="aCard yellowCard">
              <div class="box" slot="cover">
                <div class="title">今日交易次数</div>
                <div class="content">
                  <div class="left">
                    ￥
                  </div>
                  <div class="right">
                    <div class="span">delivery today</div>
                    ￥10000
                  </div>
                </div>
              </div>
            </a-card>
          </a-col>
        </a-row>
      </a-col>
    </a-row>

    <a-row :gutter="18" style="margin-top: 18px;height: 340px;">
      <!--日历-->
      <a-col :xs="24" :sm="24" :md="6" :xl="6" class="aCol">
        <a-card
          hoverable
          style="width: 100%;height: 100%;">
          <div :style="{ height: '100%',borderRadius: '4px' }" slot="cover">
            <a-calendar :fullscreen="false" @panelChange="onPanelChange"/>
          </div>
        </a-card>
      </a-col>
      <!--地图-->
      <a-col :xs="24" :sm="24" :md="12" :xl="12" class="aCol">
        <a-card
          hoverable
          style="width: 100%;height: 100%;padding: 0">
          <div style="height: 100%;" slot="cover">
            <china-map></china-map>
            <!--<map-test></map-test>-->
          </div>
        </a-card>
      </a-col>
      <!--小图表-->
      <a-col :xs="24" :sm="24" :md="6" :xl="6" class="aCol">
        <a-card
          hoverable
          style="width: 100%;height: 100%;padding: 0">
          <div style="margin: 0;height: 100%;" slot="cover">
            <doughnut-chart></doughnut-chart>
          </div>
        </a-card>
      </a-col>
    </a-row>

    <a-row :gutter="18" style="margin-top: 18px;height: 370px;">
      <a-col :xs="24" :sm="24" :md="18" :xl="18" class="aCol">
        <a-card
          hoverable
          style="width: 100%;height: 100%;">
          <div style="height: 100%;" slot="cover">
            <sj-ranked-tab></sj-ranked-tab>
          </div>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="24" :md="6" :xl="6" class="aCol">
        <a-card
          hoverable
          style="width: 100%;height: 100%;">
          <div style="margin: 0;height: 100%;" slot="cover">
            <active-bar></active-bar>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
  import ChartCard from '@/components/ChartCard'

  import ACol from 'ant-design-vue/es/grid/Col'
  import ARow from 'ant-design-vue/es/grid/Row'
  import ChinaMap from '@/views/my/dapan/tu/ChinaMap'
  import DoughnutChart from '@/views/my/dapan/tu/DoughnutChart'
  import SjRankedTab from '@/views/my/dapan/tu/SjRankedTab'
  import LineChar from '@/views/my/dapan/tu/LineChar'
  import ActiveBar from '@/views/my/dapan/tu/ActiveBar'

  import MapTest from '@/views/my/dapan/tu/MapTest'
  export default {
    components: {
      SjRankedTab,
      ARow,
      ACol,
      ChartCard,
      ChinaMap,
      DoughnutChart,
      LineChar,
      ActiveBar,
      MapTest
    },
    data() {
      return {
      }
    },
    //创建时执行
    created() {
      console.log("测试jq")
      console.log(document.getElementsByClassName("aCard"))
      // console.log($(".aCard"))
    },
    methods: {
      //日历选择
      onPanelChange(value, mode) {
        console.log(value, mode)
      },
    }
  }
</script>

<style>
  /*第一行*/
  .oneRow {
    height: 278px;
    color: white
  }

  .aCard {
    width: 100%;
    height: 100%
  }

  .aCol {
    height: 100%;
    margin-bottom: 18px;
  }

  /*第一行右边部分*/
  .oneRowRightColRow {
    height: 130px;
  }

  .oneRowRightColRow .blueCard {
    background-color: #2ca2f1;
  }

  .oneRowRightColRow .greenCard {
    background-color: #00d128;
  }

  .oneRowRightColRow .redCard {
    background-color: #de1700;
  }

  .oneRowRightColRow .yellowCard {
    background-color: #f9ba13;
  }

  .oneRowRightColRow .box {
    margin: 15px;
    height: 100%;
    width: calc(100% - 30px);
    color: #ffffff;
  }

  .oneRowRightColRow .box .title {
    margin-bottom: 15px;
  }

  .oneRowRightColRow .box .content {
    display: inline;
  }

  .oneRowRightColRow .box .content .left {
    float: left;
    font-size: 35px;
    margin-left: 5px;
    padding-top: 5px
  }

  .oneRowRightColRow .box .content .right {
    float: right;
    font-size: 23px;
    text-align: center
  }

  .oneRowRightColRow .box .content .right .span {
    font-size: 13px
  }
</style>

